<!-- 详情 -->
<template>
  <div class="drawer-layouts">
    <el-drawer :title="detailTitle" :visible.sync="drawer" @closed="closedinvitation" size="85%">
      <div class="layout" style="position: relative" v-loading="loading">
        <el-form label-position="left" :inline="true" size="small" :model="recruitingFrom" :rules="recruitingRules"
          ref="recruiting">
          <el-tabs v-model="activeName">
            <el-tab-pane label="活动基本配置" name="first">
              <div class="blockquote-box">基本信息</div>
              <div class="form-box">
                <el-form-item label="活动名称" prop="activity_name" class="form-box-item">
                  <el-input clearable maxlength="20" show-word-limit placeholder="请输入活动名称"
                    v-model="recruitingFrom.activity_name">
                  </el-input>
                </el-form-item>
                <el-form-item label="活动时间" prop="recruitingTime" class="form-box-item">
                  <el-date-picker clearable value-format="yyyy-MM-dd" @change="recruitingTimeChange"
                    v-model="recruitingTime" type="daterange" range-separator="至" start-placeholder="请选择开始时间"
                    end-placeholder="请选择结束时间">
                  </el-date-picker>
                </el-form-item>
                <!-- <el-form-item
                  label="活动状态"
                  prop="status"
                  class="form-box-item"
                >
                  <el-select v-model="basic.status" placeholder="请选择状态">
                    <el-option
                      v-for="item in status"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item> -->
              </div>
              <div class="blockquote-box">邀请海报</div>
              <div class="form-box">
                <el-row :gutter="10">
                  <el-col :xs="12" :sm="12" :md="14" :lg="14" :xl="14">
                    <el-form-item label="邀请海报" class="form-box-item">
                      <logo-upload :single-file="poster" :show-file-list="false" accept="image/jpeg, image/png"
                        @uploadCallback="posterBack" />
                      <div class="form-tip">
                        仅支持.jpg、.png、.jpeg 格式，海报大小100px*100px；
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="12" :sm="12" :md="10" :lg="10" :xl="10">
                    <div class="placard-box">
                      <div class="placard-title">默认海报示例</div>
                      <div>
                        <el-image :src="
                            recruitingFrom.poster
                              ? recruitingFrom.poster
                              : require('@/assets/images/invite.png')
                          " style="
                            width: 350px;
                            height: 420px;
                            border-radius: 6px;
                          " />
                      </div>
                      <div class="placard-tip">
                        1.
                        海报页面会展示邀请人和邀请码信息，为不影响海报的美观度，在设计海报时请注意邀请信息的展示；
                        <br />2.
                        邀请信息为系统默认生成，设计海报时无需设计邀请相关信息；
                        <br />3. 不上传邀请海报，则以默认海报为主；
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-divider></el-divider>
              <div class="button-box">
                <el-button @click="basic_information('basic', 'second')" class="next-button">下一步 <i
                    class="el-icon-caret-right el-icon--right"></i></el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="适用范围" name="second">
              <div class="blockquote-box">适用范围</div>
              <div class="form-box">
                <el-form-item label="适用区域" class="form-box-item">
                  <el-cascader filterable @change="regionChangeWay" v-model="recruitingFrom.appoint_area_select_json"
                    style="width: 100%" :options="regionList" collapse-tags :props="{
                      expandTrigger: 'hover',
                      multiple: true,
                      value: 'id',
                      label: 'name',
                      children: 'children',
                      checkStrictly: false,
                      emitPath: true,
                    }" clearable></el-cascader>
                  <!-- <el-cascader
                    @change="regionChangeWay"
                    v-model="recruitingFrom.appoint_area_select"
                    style="width: 100%"
                    :options="regionList"
                    collapse-tags
                    :props="{
                      multiple: true,
                      value: 'id',
                      label: 'name',
                      children: 'children',
                      checkStrictly: true,
                    }"
                    clearable
                  ></el-cascader> -->
                </el-form-item>
                <el-form-item label="用户分组" class="form-box-item">
                  <el-select @change="selectChangeWay('appoint_group_select')"
                    v-model="recruitingFrom.appoint_group_select" multiple clearable collapse-tags placeholder="请选用户分组">
                    <el-option v-for="item in groupingList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户等级" class="form-box-item">
                  <el-select @change="selectChangeWay('appoint_level_select')"
                    v-model="recruitingFrom.appoint_level_select" multiple clearable collapse-tags placeholder="请选用户等级">
                    <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户标签" class="form-box-item">
                  <el-select clearable @change="selectChangeWay('appoint_tag_select')" style="width: 100%"
                    v-model="recruitingFrom.appoint_tag_select" multiple collapse-tags placeholder="请选择标签">
                    <el-option-group v-for="group in TagCategoryAll" :key="group.category_name"
                      :label="group.category_name">
                      <el-option v-for="item in group.child" :key="item.id" :label="item.tag_name" :value="item.id">
                      </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </div>
              <div class="blockquote-box">可参与活动的用户</div>
              <div class="form-box">
                <div class="table-top">
                  <div class="table-top-left">
                    <div>所有用户：{{ rangeCanJoinUsertotal }}</div>
                    <div>黑名单用户：{{ joinblackIds.length }}</div>
                    <div>重复用户：{{ rangeHasJoinUserTotal }}</div>
                  </div>
                  <div class="table-top-right">
                    <div>
                      <el-button style="height: 30px" type="primary" @click="addConfig('黑名单')" plain
                        size="small">配置黑名单</el-button>
                    </div>
                    <div>
                      <el-button style="height: 30px" type="primary" @click="addConfig('重复对象')" plain
                        size="small">配置重复</el-button>
                    </div>
                  </div>
                </div>
                <div>
                  <el-table v-loading="rangeCanJoinUserLoading" highlight-current-row :data="CanJoinUserList"
                    :header-cell-style="{
                      'background-color': '#f3f8fe',
                      color: '#606266',
                      height: '50px',
                    }" style="width: 100%">
                    <el-table-column align="center" prop="id" label="用户id"></el-table-column>
                    <el-table-column align="center" prop="nickname" label="用户昵称"></el-table-column>
                    <el-table-column align="center" prop="region" label="用户区域">
                      <template slot-scope="scope">
                        {{
                          scope.row.province_name
                            ? scope.row.province_name
                            : "-"
                        }}
                        {{ scope.row.city_name ? scope.row.city_name : "-" }}
                      </template>
                    </el-table-column>
                    <el-table-column width="200" align="center" prop="group" label="用户群组">
                      <template slot-scope="scope">
                        <!-- 用户群组：提示多个群组需要用分隔符区分，‘空格’+‘/’,超过三个显示超过的数量 -->
                        <el-tooltip class="item" effect="dark" :content="scope.row.group_name" placement="top">
                          <div v-if="scope.row.group_name" style="display: flex; justify-content: center">
                            <div>{{ scope.row.group_name }}</div>
                          </div>
                        </el-tooltip>
                        <div v-if="!scope.row.group_name">-</div>
                      </template>
                    </el-table-column>
                    <el-table-column width="200" align="center" prop="tag" label="用户标签">
                      <template slot-scope="scope">
                        <!-- 用户群组：提示多个群组需要用分隔符区分，‘空格’+‘/’,超过三个显示超过的数量 -->
                        <el-tooltip class="item" effect="dark" :content="scope.row.tag_name.join('/')" placement="top">
                          <div v-if="scope.row.tag_name.length !== 0" style="display: flex; justify-content: center">
                            <div v-if="index < 3" v-for="(item, index) in scope.row.tag_name" :key="index">
                              {{ item }} /
                            </div>
                            <div v-if="scope.row.tag_name.length > 3" class="table-num">
                              + {{ scope.row.tag_name.length }}
                            </div>
                          </div>
                        </el-tooltip>
                        <div v-if="scope.row.tag_name.length == 0">-</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="status" label="参与活动状态"></el-table-column>
                    <el-table-column fixed="right" width="100" prop="address" label="操作" align="center">
                      <template slot-scope="scope">
                        <el-button type="text" @click="joinblack([scope.row])">
                          加入黑名单
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination v-show="rangeCanJoinUsertotal > 0" :total="rangeCanJoinUsertotal"
                    :page.sync="rangeCanJoinUserSearch.page" :limit.sync="rangeCanJoinUserSearch.count"
                    @pagination="getRangeCanJoinUserListWay" />
                </div>
              </div>
              <el-divider></el-divider>
              <div class="button-box">
                <el-button @click="activeName = 'first'" icon="el-icon-caret-left" class="next-button">上一步</el-button>
                <el-button @click="activeName = 'third'" class="next-button">下一步 <i
                    class="el-icon-caret-right el-icon--right"></i></el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="拉新规则" name="third">
              <el-alert style="margin: 20px 0;" title="奖励说明:" type="warning" :closable="false">
                拉新活动的被邀请人为平台新用户，在设置被邀请人奖励时需要注意平台是否已经创建<span
                  class="Instructions-important">新人礼</span>活动；若已创建新人礼活动，则同一个新用户会发放两个奖励（即新人礼奖励和被邀请人奖励），为保障运营成本，设置被邀请人奖励时请记得参考<span
                  class="Instructions-important">新人礼</span>活动的奖励配置哦~
              </el-alert>
              <div class="blockquote-box">活动规则</div>

              <div v-if="task_rewards.includes('消费奖励')">
                <div class="form-box">
                  <el-form-item label="配置条件" class="form-box-item">
                    <el-button type="primary" style="height: 30px" @click="addProductConfig('配置商品')">配置指定商品({{
                        this.reward_task_goods_ids.length
                      }})</el-button>
                  </el-form-item>
                  <div>
                    <el-form-item label="分佣到账时间节点设置" required class="orm-box-item" prop="node">
                      <el-select v-model="recruitingFrom.node" placeholder="请选择">
                        <el-option v-for="item in mouchoptions" :key="item.value" :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item class="form-box-item">
                      积分转化卡领取后
                      <el-input @focus="FocusRow()" @blur="BlurRow()" @input="handleInput" placeholder="天数"
                        v-model.number="recruitingFrom.validity_day" style="width: 80px"></el-input>
                      天内有效
                      <span style="font-size: 12px; color: #a3a3a3">
                        &nbsp;&nbsp;输入0或不填为永久有效
                      </span>
                    </el-form-item>
                  </div>

                  <div class="order-box" v-for="(order, index) in recruitingFrom.retail_rule"
                    :key="index + 'retail_rule'">
                    <el-form-item label="消费订单" required class="numbox form-box-item">
                      <el-radio-group v-model="order.range_type">
                        <el-radio :label="1">固定单数</el-radio>
                        <el-radio :label="2">订单区间</el-radio>
                      </el-radio-group>
                      <div style="margin-left: 30px">
                        第
                        <el-input-number v-model="order.range_num_min" :prop="'orders.' + index + '.range_num_min'"
                          controls-position="right" :min="elInputNumberMin(order, index)" @change="
                            (currentValue, oldValue) =>
                              numChange(currentValue, oldValue, order, index)
                          "></el-input-number>
                        <span v-if="order.range_type == 1" style="margin-left: 5px">单</span>
                        <span v-else style="margin-left: 30px">-</span>
                      </div>
                      <div style="margin-left: 30px" v-if="order.range_type == 2">
                        <el-input-number v-model="order.range_num_max" :prop="'orders.' + index + '.range_num_max'"
                          controls-position="right" :min="order.range_num_min + 1" @change="
                            (currentValue, oldValue) =>
                              numChange(currentValue, oldValue, order, index)
                          "></el-input-number>
                        单
                      </div>
                      <div style="margin-left: 50px" v-if="
                          index == recruitingFrom.retail_rule.length - 1
                        ">
                        <el-button type="primary" icon="el-icon-plus" circle @click="addOrder"></el-button>
                        <el-button icon="el-icon-minus" circle @click="removeOrder(order)"
                          v-if="index !== 0"></el-button>
                        （说明：点击+，此模块重复一次，可以单独配置）
                      </div>
                    </el-form-item>
                    <div class="form-box">
                      <el-tabs>
                        <el-tab-pane v-for="(invite, indexs) in order.inviteArr" :key="indexs + 'inviteArr'"
                          :label="indexs == 0 ? '邀请人奖励' : '被邀请人奖励'">
                          <div v-if="indexs == 0">
                            <div style="margin-top:20px;display:inline-block;" class="Instructions-important">分佣公式设置
                            </div>
                            <span style="font-size: 14px;">（说明：分佣结果为<span class="text-red">现金</span>，转到用户<span
                                class="text-red">账户余额</span>，并<span class="text-red">生成记录</span>）</span>

                            <div style="margin-top:20px">
                              <el-form-item label="CM=（R-C）*N%"> </el-form-item>
                              <el-form-item label="直推分佣比例设置：" :prop="
                                'retail_rule.' +
                                index +
                                '.inviteArr.' +
                                indexs +
                                '.direct_commission_rate'
                              " :rules="{
                                required: true,
                                validator: quantity,
                                trigger: 'change',
                              }" >
                                <el-input style="width: 120px;" placeholder="请输入0-100"
                                  v-model.number="invite.direct_commission_rate" />
                                <div class="form_text">%</div>
                              </el-form-item>

                              <el-form-item style="margin-left:30px" label="间推分佣比例设置："
                              :prop="
                                'retail_rule.' +
                                index +
                                '.inviteArr.' +
                                indexs +
                                '.indirect_commission_rate'
                              " :rules="{
                                required: true,
                                validator: quantity,
                                trigger: 'change',
                              }"
                              >
                                <el-input style="width: 120px;" v-model.number="invite.indirect_commission_rate"
                                  placeholder="请输入0-100" />
                                <div class="form_text">%</div>
                              </el-form-item>
                            </div>
                            <div class="text-explain">
                              <div class="Instructions-important">公式说明：</div>
                              <p>1、CM代表分佣，单位：元；</p>
                              <p>2、R代表用户实际支付金额（元）； </p>
                              <p>3、C代表商品成本价（元）； </p>
                              <p>4、N代表分佣比例； </p>
                              <p>5、当R-C≤0,邀请者没有分佣； </p>
                            </div>
                          </div>
                          <el-form-item v-if="indexs == 1" class="form-box-item" style="margin-top: 20px">
                            <el-checkbox-group v-model="invite.reward_type" size="small">
                              <el-checkbox label="2">积分 </el-checkbox>
                              <el-checkbox label="3">提货券</el-checkbox>
                              <el-checkbox label="1">余额</el-checkbox>
                              <el-checkbox label="4">积分转化卡</el-checkbox>
                            </el-checkbox-group>
                          </el-form-item>
                          <div v-if="indexs == 1">
                            <el-form-item v-if="invite.reward_type.includes('2')" label="赠送积分" :prop="
                                'retail_rule.' +
                                index +
                                '.inviteArr.' +
                                indexs +
                                '.integral_num'
                              " :rules="{
                                required: true,
                                validator: quantity,
                                trigger: 'change',
                              }" class="form-box-item">
                              <el-input placeholder="请输入赠送积分数量" v-model.number="invite.integral_num">
                              </el-input>
                            </el-form-item>
                            <el-form-item v-if="invite.reward_type.includes('3')" label="赠送提货券" :prop="
                                'retail_rule.' +
                                index +
                                '.inviteArr.' +
                                indexs +
                                '.voucher_num'
                              " :rules="{
                                required: true,
                                validator: quantity,
                                trigger: 'change',
                              }" class="form-box-item">
                              <el-input placeholder="请输入赠送提货券数量" v-model.number="invite.voucher_num">
                              </el-input>
                            </el-form-item>
                            <el-form-item v-if="invite.reward_type.includes('1')" label="赠送余额" :prop="
                                'retail_rule.' +
                                index +
                                '.inviteArr.' +
                                indexs +
                                '.balance_num'
                              " :rules="{
                                required: true,
                                validator: quantity,
                                trigger: 'change',
                              }" class="form-box-item">
                              <el-input placeholder="请输入赠送余额" v-model.number="invite.balance_num">
                              </el-input>
                            </el-form-item>
                            <el-form-item v-if="invite.reward_type.includes('4')" label="积分转化卡" :prop="
                                'retail_rule.' +
                                index +
                                '.inviteArr.' +
                                indexs +
                                '.conversion_rate'
                              " :rules="{
                                required: true,
                                validator: quantity,
                                trigger: 'change',
                              }" class="form-box-item">
                              <el-input placeholder="请输入0-100数值" v-model.number="invite.conversion_rate">
                              </el-input>
                              <span style="margin-left: 6px;">%</span>
                            </el-form-item>


                          </div>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                  </div>
                </div>
              </div>

              <el-divider></el-divider>
              <div class="button-box">
                <el-button @click="activeName = 'third'" icon="el-icon-caret-left" class="next-button">上一步</el-button>
                <el-button @click="activeName = 'fourth'" class="next-button">下一步 <i
                    class="el-icon-caret-right el-icon--right"></i></el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="活动说明" name="fourth">
              <div class="blockquote-box">活动简介&规则说明</div>
              <div class="form-box">
                <el-form-item label="活动简介" prop="description" class="form-box-item">
                  <el-input type="textarea" style="width: 727px" :rows="5" placeholder="请输入内容"
                    v-model="recruitingFrom.description">
                  </el-input>
                </el-form-item>
                <el-form-item label="规则说明" prop="explain" class="form-box-item">
                  <editor-text v-model="recruitingFrom.explain" :height="240" @input="editorclick" />
                </el-form-item>
              </div>
              <el-divider></el-divider>
              <div class="button-box">
                <el-button @click="activeName = 'third'" icon="el-icon-caret-left" class="next-button">上一步</el-button>
                <el-button class="next-button" @click="saveSubmit">保存</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
    </el-drawer>
    <!-- 配置抽屉 -->
    <config ref="config" v-if="ifShowConfig" :userIds="userIds" :regionList="regionList" :groupingList="groupingList"
      :TagCategoryAll="TagCategoryAll" :gradeList="gradeList" :ConfigTitle="ConfigTitle" />
    <productConfig v-if="ifShowProductConfig" :goodsType="goodsType" :goodsIdArr="reward_task_goods_ids"
      :goodsIdsRowList="reward_task_goods_ids_row" :configuration="{
        total_num: total_num,
        gif_num: gif_num,
      }" :productConfigTitle="productConfigTitle"></productConfig>
  </div>
</template>
<script>
  // 引入
  import config from "../demo/config";
  import productConfig from "../demo/productConfig";
  import LogoUpload from "@/components/FileUpload";

  import {
    rangeCanJoinUserList,
    rangeHasJoinUserList
  } from "@/api/index";
  import {
    addNewProductDistribution,
    getInvitedetail,
  } from "@/api/recruitment/index";
  export default {
    name: "detail",
    props: [
      "detailTitle",
      "regionList",
      "gradeList",
      "TagCategoryAll",
      "groupingList",
    ],
    components: {
      config,
      productConfig,
      LogoUpload,
    },

    data() {
      return {
        nodenimber: "",
        mouchoptions: [{
          value: 1,
          label: '确认收货后'
        }, {
          value: 2,
          label: '评价后'
        }, {
          value: 3,
          label: '售后过期后'
        }],
        id: "",
        drawer: true,
        detailtitle: "",
        activeName: "first",
        recruitingFrom: {
          activity_name: "", // 活动名称
          start_time: "", // 开始时间（立即生效请传空字符串） 2023-10-11 13:00:00
          end_time: "", // 结束时间 （永久有效请传空字符串）2023-10-11 13:00:00
          status: 2, // 状态:-1结束 1开启 2关闭 3进行中
          sort: "", // 排序默认：0
          node: "", //佣金到账时间
          poster: "", // 活动图片
          description: "", //活动简介
          explain: "", // 活动说明
          appoint_area_select_json: [],
          appoint_area_select: [],
          appoint_level_select: [],
          appoint_group_select: [],
          appoint_tag_select: [],
          user_black: [],
          validity_day: 0, //积分转换卡有效期
          reward_task_goods_ids: "", // 任务商品，指定的商品可以参与活动，多个商品以,分开。（任务消费有此参数）
          // 邀请奖励
          retail_rule: [{
            range_type: 1,
            range_num_min: "",
            range_num_max: "",
            inviteArr: [{
                direct_commission_rate: null, //直推分佣比例
                indirect_commission_rate: null, //间接分佣比例
              },
              {
                reward_type: [], //
                range_num_min: null, //【消费奖励】邀请人区间下限，最小值。（消费任务有此参数）
                range_num_max: null, //【消费奖励】邀请人区间上限，最大值。（消费任务有此参数）
                balance_num: "", //【消费奖励】邀请人 - 奖励金额（元）
                integral_num: "", //【消费奖励】邀请人 - 奖励积分（元）
                voucher_num: "", //【消费奖励】邀请人 - 奖励提货券（元）
                conversion_rate: "", //【消费奖励】邀请人 - 积分转提货券比例，百分比（例：1.5，代表1.5%，精确到二位小数）
              },
            ],
          }, ],
          reward_object_from_consume: [], // 【消费奖励】邀请人
          reward_object_to_consume: [], // 【消费奖励】邀请人
        },
        recruitingTime: [], // 活动开始结束时间回显
        poster: {}, // 邀请海报回显
        CanJoinUserList: [], // 满足条件的可参与用户列表
        userIds: [], // 所配置的黑名单用户用来动态传参
        dataListConfig: [], //   适用范围传递的数据
        joinblackIds: [], // 黑名单列表
        inviter_rewards: ["邀请人奖励", "被邀请人奖励"], // 邀请人奖励和被邀请人奖励是否开启
        task_rewards: ["注册奖励", "完成实名认证", "消费奖励"],
        reward_task_goods_ids: [], // 任务商品数组
        reward_task_goods_ids_row: [], // 任务商品数组
        total_num: 0,
        gif_num: 0,
        goodsType: "购买商品",
        recruitingRules: {
          node: [{ required: true, message: '请选择分佣到账时间节点', trigger: 'change' }],
          activity_name: [{
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                callback(new Error("请输入活动名称"));
              } else {
                if (req.test(value)) {
                  callback(new Error("活动名称中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          }, ],
          recruitingTime: [{
            required: true,
            validator: (rule, value, callback) => {
              if (this.recruitingTime.length == 0) {
                return callback(new Error("请选择活动的时间段"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          task_rewards: [{
            required: true,
            validator: (rule, value, callback) => {
              if (this.task_rewards.length == 0) {
                return callback(new Error("请选择奖励任务"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          inviter_rewards: [{
            required: true,
            validator: (rule, value, callback) => {
              if (this.inviter_rewards.length == 0) {
                return callback(new Error("请选择奖励对象"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],

          // reward_task_goods_ids: [
          //   {
          //     required: true,
          //     validator: (rule, value, callback) => {
          //       if (this.reward_task_goods_ids.length !== 0) {
          //         return callback();
          //       } else {
          //         callback(new Error("请配置指定商品"));
          //       }
          //     },
          //     trigger: "change",
          //   },
          // ],
          description: [{
            required: true,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (value == "") {
                callback(new Error("请输入活动简介"));
                return;
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          explain: [{
            required: true,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (value == "") {
                callback(new Error("请输入规则说明"));
                return;
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
        },
        reward_type: (rule, value, callback) => {
          if (value.length == 0) {
            return callback(new Error("请选择奖励类型"));
          } else {
            callback();
          }
        },
        quantity: (rule, value, callback) => {
          if (value === "" || !value) {
            callback(new Error("请输入奖励数值"));
          } else {

            let req = /^\d+(\.\d{1,2})?$/;

            if (req.test(value)) {
              if (rule.field.search("conversion_rate") !== -1 || rule.field.search("direct_commission_rate") !== -1 || rule.field.search("indirect_commission_rate") !== -1) {
                if (Number(value) > 100) {
                  callback(new Error("转化率比例不能大于100"));
                } else if (Number(value) < 0) {
                  callback(new Error("转化率比例不能小于1"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            } else {
              callback(new Error("只能输入数字,且只能保留两位小数"));
            }
          }
        },
        // 校验
        rangerules: {},
        rangeCanJoinUserSearch: {
          activity_type: 10001, // 活动类型：1=爱心助农;；2=秒杀；3=拼团；4=消费3天全返；5=送积分；6=积分转化提货券；7=好物推荐；8=邀请有礼；10001=抽奖
          remove_activity_id: "", // 需要排除的活动ID（修改活动，需要传当前活动ID）
          appoint_area_select: "", // 选择的地区ID（市ID，多个以,分开）
          appoint_level_select: "", // 选择的用户等级ID（多个以,分开）
          appoint_group_select: "", // 选择的用户分组ID（多个以,分开）
          appoint_tag_select: "", // 选择的用户标签ID（多个以,分开）
          user_black: "", // 黑名单用户ID（多个以,分开）
          page: 1,
          count: 10,
        }, //
        rangeCanJoinUserLoading: false, // 使用范围使用用户列表
        rangeCanJoinUsertotal: 0, // 使用范围使用用户列表总条数
        joinblackList: [], // 黑名单列表
        HasJoinUserList: [], // 重复用户列表
        rangeHasJoinUserTotal: 0, // 重复用户数
        loading: false,

        ifShowConfig: false,
        ConfigTitle: "",
        ifShowProductConfig: false,
        productConfigTitle: "",
        dialogFormVisible: false,
        form: {
          name: "",
          image: "",
        },
        images: [],
        dialogtitle: "",
        image: "",
      };
    },
    mounted() {
      const p5 = new Promise((resolve, reject) => {
        rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            reject();
            return;
          }
          this.CanJoinUserList = res.data.list;
          this.rangeCanJoinUsertotal = res.data.total;
          resolve();
        });
      });
      const p6 = new Promise((resolve, reject) => {
        rangeHasJoinUserList({
          activity_type: 10001
        }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            reject();
            return;
          }
          this.HasJoinUserList = res.data.list;
          this.rangeHasJoinUserTotal = res.data.total;
          resolve();
        });
      });
      Promise.all([p5, p6])
        .then(() => {})
        .catch(() => {});
    },
    methods: {
      //时间戳转换
      formatTimestamp(timestamp) {
        let date = new Date(timestamp * 1000);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();
        let formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        return formattedDateTime;
      },


      //编辑回显
      getAwardInfoWay(row) {
        this.loading = true;
        this.id = row.id;
        getInvitedetail({
          id: this.id
        }).then((res) => {
          this.loading = false;
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            return;
          }
          let objRes = res.data;
          console.log(objRes)
          this.recruitingFrom.activity_name = objRes.activity_name;
          this.recruitingTime = [this.formatTimestamp(objRes.start_time), this.formatTimestamp(objRes.end_time)];
          this.recruitingFrom.start_time = this.formatTimestamp(objRes.start_time);
          this.recruitingFrom.end_time = this.formatTimestamp(objRes.end_time);
          this.recruitingFrom.status = objRes.status;
          this.recruitingFrom.node = objRes.node;
          this.posterBack({
            url: objRes.poster
          });
          this.regionChangeWay(JSON.parse(objRes.appoint_area_select_json));
          this.recruitingFrom.appoint_group_select = objRes.appoint_group_select;
          this.selectChangeWay("appoint_group_select");
          this.recruitingFrom.appoint_level_select = objRes.appoint_level_select;
          this.selectChangeWay("appoint_level_select");
          this.recruitingFrom.appoint_tag_select = objRes.appoint_tag_select;
          this.selectChangeWay("appoint_tag_select");
          this.joinblackIds = objRes.user_black;
          this.recruitingFrom.validity_day = objRes.validity_day,
          this.recruitingFrom.retail_rule = objRes.retail_rule;
          this.recruitingFrom.retail_rule = this.recruitingFrom.retail_rule.map(item => {
            return {
              range_type: item.range_type,
              range_num_min: item.range_num_min,
              range_num_max: item.range_num_max,
              id: item.id,
              inviteArr: [{
                  direct_commission_rate: item.direct_commission_rate, // 直推分佣比例
                  indirect_commission_rate: item.indirect_commission_rate, // 间接分佣比例
                },
                {
                  reward_type: item.reward_type.split(","),
                  balance_num: item.balance_num,
                  integral_num: item.integral_num,
                  voucher_num: item.voucher_num,
                  conversion_rate: item.conversion_rate,
                },
              ],
            };
          });
          this.recruitingFrom.explain = objRes.explain;
          this.recruitingFrom.description = objRes.description;
          var goodsId = objRes.goods_ids.split(",");
          if (goodsId.length !== 0) {
            this.reward_task_goods_ids = goodsId.map(Number);
          } else {
            this.reward_task_goods_ids = [];
          }
        });
      },
      // 基本信息点击下一步调用
      basic_information(formName, activeName) {
        this.activeName = activeName;
      },
      // 获取可参与用户列表
      getRangeCanJoinUserListWay() {
        this.rangeCanJoinUserLoading = true;
        rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
          this.rangeCanJoinUserLoading = false;
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            return;
          }
          this.CanJoinUserList = res.data.list;
          this.rangeCanJoinUsertotal = res.data.total;
        });
      },
      //打开抽屉
      addConfig(title) {
        this.ifShowConfig = true;
        this.$nextTick(() => {
          if (title == "黑名单") {
            this.userIds = this.joinblackIds;
          } else if (title == "重复对象") {
            this.userIds = this.joinblackIds;
          }
          this.ConfigTitle = title;
        });
      },
      //加入黑名单
      joinblack(row) {
        this.$confirm("确定要将该用户添加到黑名单吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            if (row.length !== 0) {
              row.forEach((item) => {
                this.joinblackIds.push(item.id);
              });
            }
            this.rangeCanJoinUserSearch.user_black = this.joinblackIds.toString();
            this.getRangeCanJoinUserListWay();
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.userIds = this.joinblackIds;

            this.$refs.config.getList(this.joinblackIds);
          })
          .catch(() => {});
      },
      // 移除黑名单
      removeBlacklist(row) {
        var _this = this;
        _this
          .$confirm("确定要将用户移出黑名单吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            var arr = [];
            if (row.length !== 0) {
              row.forEach((item) => {
                arr.push(item.id);
              });
            } else {
              arr = [];
            }
            _this.joinblackIds = _this.getArrDifference(arr, _this.joinblackIds);
            _this.rangeCanJoinUserSearch.user_black =
              _this.joinblackIds.toString();
            _this.getRangeCanJoinUserListWay();
            _this.$message({
              type: "success",
              message: "移出成功!",
            });
            _this.userIds = _this.joinblackIds;
            _this.$refs.config.getList(_this.userIds);
          })
          .catch(() => {});
      },
      // 数组排除重复的
      getArrDifference(arr1, arr2) {
        return arr1.concat(arr2).filter(function(v, i, arr) {
          return arr.indexOf(v) === arr.lastIndexOf(v);
        });
      },
      // 下拉框选择调用
      selectChangeWay(name) {
        if (name == "appoint_group_select") {
          this.rangeCanJoinUserSearch.appoint_group_select =
            this.recruitingFrom[name].toString();
        } else if (name == "appoint_level_select") {
          this.rangeCanJoinUserSearch.appoint_level_select =
            this.recruitingFrom[name].toString();
        } else if (name == "appoint_tag_select") {
          this.rangeCanJoinUserSearch.appoint_tag_select =
            this.recruitingFrom[name].toString();
        }
        this.getRangeCanJoinUserListWay();
      },
      // 选择区域调用
      regionChangeWay(val) {
        console.log(val);
        var arr = [];
        val.forEach((item) => {
          arr.push(item[1]);
        });
        this.recruitingFrom.appoint_area_select_json = val;
        this.rangeCanJoinUserSearch.appoint_area_select = arr.toString();
        this.recruitingFrom.appoint_area_select = arr.toString();
        this.getRangeCanJoinUserListWay();
      },


      // 关闭抽屉
      closedinvitation() {
        this.$parent.closedetail();
      },
      //配置商品
      addProductConfig(title) {
        this.productConfigTitle = title;
        this.ifShowProductConfig = true;
      },
      //关闭子抽屉
      closeConfig() {
        this.ifShowConfig = false;
        this.ifShowProductConfig = false;
      },

      //增加消费订单
      addOrder() {
        this.recruitingFrom.retail_rule.push({
          range_type: 1,
          range_num_min: null,
          range_num_max: null,
          inviteArr: [{

              direct_commission_rate: null, //直推分佣比例
              indirect_commission_rate: null, //间接分佣比例
            },
            {
              id: 1,
              reward_type: [], //
              range_num_min: null, //【消费奖励】邀请人区间下限，最小值。（消费任务有此参数）
              range_num_max: null, //【消费奖励】邀请人区间上限，最大值。（消费任务有此参数）
              balance_num: "", //【消费奖励】邀请人 - 奖励金额（元）
              integral_num: "", //【消费奖励】邀请人 - 奖励积分（元）
              voucher_num: "", //【消费奖励】邀请人 - 奖励提货券（元）
              conversion_rate: "", //【消费奖励】邀请人 - 积分转提货券比例，百分比（例：1.5，代表1.5%，精确到二位小数）
            },
          ],
        });
      },
      //移除消费订单
      removeOrder(item) {
        var index = this.recruitingFrom.retail_rule.indexOf(item);
        if (index !== -1) {
          this.recruitingFrom.retail_rule.splice(index, 1);
        }
      },
      //订单数值改变
      numChange(currentValue, oldValue, order, index) {

        if (order.range_type == 1) {
          order.range_num_max = order.range_num_min;
        }
      },
      // 选择时间回调
      recruitingTimeChange(val) {
        this.recruitingFrom.start_time = val[0];
        this.recruitingFrom.end_time = val[1];
      },
      // 上传邀请海报回调
      posterBack(file) {
        this.poster = file;
        this.recruitingFrom.poster = file.url;
      },
      // 富文本回调
      editorclick(e) {
        this.recruitingFrom.explain = e;
      },
      // 最小值
      elInputNumberMin(item, index) {
        if (index == 0) {
          return 1;
        }
        if (this.recruitingFrom.retail_rule[index - 1] == 1) {
          return Number(
            this.recruitingFrom.retail_rule[index - 1].range_num_min + 1
          );
        } else {
          return Number(
            this.recruitingFrom.retail_rule[index - 1].range_num_max + 1
          );
        }
      },
      // 奖池商品
      goodsIdsRowWay(row) {
        this.reward_task_goods_ids_row = row;
      },
      // 奖池商品
      goodsIdsWay(row) {
        this.reward_task_goods_ids = row;
      },
      // 文本框聚焦执行
      FocusRow() {
        if (this.recruitingFrom.validity_day == 0) {
          this.recruitingFrom.validity_day = "";
        }
        this.$forceUpdate();
      },
      handleInput(){
        const regex = /^[0-9]*$/;
        if (!regex.test(this.recruitingFrom.validity_day)) {
          if (this.recruitingFrom.validity_day < 0) {
            this.recruitingFrom.validity_day = 0;
          }else{
            this.recruitingFrom.validity_day = this.recruitingFrom.validity_day.replace(/\D/g, '');
          }
          return
        }
      },
      // 文本框失焦执行
      BlurRow() {

        if (this.recruitingFrom.validity_day == "") {
          this.recruitingFrom.validity_day = 0;
          return;
        }
        if (Number(this.recruitingFrom.validity_day)) {
          this.recruitingFrom.validity_day = Number(this.recruitingFrom.validity_day);
        }
        this.$forceUpdate();
      },
      // 保存活动信息
      saveSubmit() {
        this.$refs.recruiting.validate((valid, error) => {
          if (valid) {
            let objForm = JSON.parse(JSON.stringify(this.recruitingFrom));
            objForm.appoint_area_select_json = JSON.stringify(
              objForm.appoint_area_select_json
            );
            objForm.appoint_group_select =
              objForm.appoint_group_select.toString();
            objForm.appoint_level_select =
              objForm.appoint_level_select.toString();
            objForm.appoint_tag_select = objForm.appoint_tag_select.toString();
            objForm.user_black = this.joinblackIds.toString();

            objForm.retail_rule.forEach((item) => {
              if (item.range_type == 1) {
                item.range_num_max = item.range_num_min;
              }
              item.inviteArr.forEach((items, index) => {
                items.range_num_max = item.range_num_max;
                items.range_num_min = item.range_num_min;
                if (index == 0) {
                  item.direct_commission_rate = items.direct_commission_rate,
                    item.indirect_commission_rate = items.indirect_commission_rate
                } else {
                  item.range_num_max = items.range_num_max,
                    item.range_num_min = items.range_num_min,
                    item.balance_num = items.balance_num,
                    item.conversion_rate = items.conversion_rate,
                    item.integral_num = items.integral_num,
                    item.voucher_num = items.voucher_num,
                    item.reward_type = items.reward_type.join(",");
                }
              });
              delete item.inviteArr
            });
            this.$nextTick(() => {
              objForm.goods_ids = this.reward_task_goods_ids.toString();
              if (this.id) {
                objForm.id = this.id;
              }
              this.loading = true;
              addNewProductDistribution(objForm).then((res) => {
                this.loading = false;
                if (res.code !== 200 || res.status !== 1) {
                  this.$messages.error(res.msg);
                  return;
                }
                this.$messages.success(res.msg);
                this.closedinvitation();
              });
            });
          } else {
            for (var key in error) {
              this.$messages.error(error[key][0].message);
              break;
            }
            return false;
          }
        });
      },
    },
  };
</script>
<style lang="scss">
  .drawer-layouts {

    /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
    .el-drawer__body {
      overflow: auto;
    }

    /*2.隐藏滚动条，太丑了*/
    .el-drawer__container ::-webkit-scrollbar {
      display: none;
    }

    .el-drawer__header {
      background-color: #409eff;
      color: #ffffff;
      padding: 10px 20px;
      margin-bottom: 10px;
    }

    .el-tabs--card {
      /*height: calc(100vh - 110px); */
      /* overflow-y: auto; */
    }

    // .el-tab-pane {
    //   height: calc(100vh - 110px);
    //   overflow-y: auto;
    // }

    //tabs
    .el-tabs__header {
      padding-left: 50px;
      margin: 0;
    }

    .el-tabs__item {
      padding: 0 40px;
    }

    .order-box {
      .el-tabs__nav-wrap::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: #f4f4f4;
        z-index: 1;
      }
    }

    .el-tabs__nav-wrap::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #ffffff;
      z-index: 1;
    }

    .el-alert--warning.is-light .el-alert__description {
      color: #c77b04;
      font-size: 14px;
    }

    .form-box-item {
      .el-form-item__label {
        font-size: 14px;
        font-weight: 500;
        // width: 96px;
      }

      .el-input {
        width: 250px;
      }

      .el-upload-list--picture-card .el-upload-list__item {
        width: 100px;
        height: 100px;
      }

      .el-upload--picture-card {
        width: 100px;
        height: 100px;
        line-height: 110px;
      }
    }

    .numbox {
      .el-form-item__content {
        display: -webkit-inline-box;
      }

      .el-input {
        width: 130px !important;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .blockquote-box {
    border-left: 4px solid #409eff;
    padding-left: 16px;
    margin: 16px 0;
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-size: 16px;
  }

  .form_text {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #606266;
    margin-left: 8px;
  }

  .text-explain p {
    font-size: 13px;
    color: #606266;
  }

  .form-box {
    margin: 0 20px;

    .form-box-item {
      padding-bottom: 10px;
      padding-right: 20px;
      font-size: 12px;
      color: #4c4c4c;

      .form-tip {
        font-size: 12px;
        color: #4c4c4c;

        .tip-key {
          font-weight: bold;
          text-decoration: underline;
        }
      }

      .form-product {
        display: flex;
        font-size: 12px;
        color: #ee3737;
      }

      .Instructions {
        background: #f6f6f6;
        border-radius: 4px;
        padding: 10px;
      }
    }

    .table-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      .table-top-left {
        display: flex;
        line-height: 30px;

        div {
          margin-right: 20px;
        }
      }

      .table-top-right {
        display: flex;

        div {
          margin-left: 20px;
        }
      }
    }

    .table-num {
      margin-left: 5px;
      background: #f0f0f0;
      width: 35px;
      border-radius: 5px;
    }

    .placard-box {
      .placard-title {
        font-size: 14px;
        color: #4893ff;
        width: 200px;
        text-align: center;
        margin-bottom: 10px;
      }

      .placard-tip {
        margin-top: 10px;
        width: 350px;
        color: #6c6c6c;
        line-height: 20px;
        font-size: 12px;
      }
    }

    .order-box {
      background: #f4f4f4;
      padding: 20px 10px;
      border-radius: 5px;
      margin-bottom: 20px;
    }
  }

  .button-box {
    margin-right: 30px;
    margin-bottom: 20px;

    .next-button {
      background-color: #eeeeee;
      color: #4c4c4c;
      height: 30px;
    }
  }

  .Instructions-important {
    color: #ee3737;
    font-weight: bold;
  }

  .text-red {
    color: #ee3737;
  }
</style>
